let product_vm =new Vue({
    el:".grid",//管理瀑布流元素
    data:{
        p_arr:[]
    },
    created:function () {
        let url="/product/selectforindex"
        if (location.search.indexOf("cid")!=-1){//包含cid
            //得到地址栏里的分类id
            let cid =location.search.split("=")[1];
            url="/product/selectByCid?cid="+cid;
        }else if (location.search.indexOf("kw")!=-1){//包含kw
            //得到搜索的关键字？kw=xxx
            let kw =location.search.split("=")[1];
            url="/product/selectByKw?kw="+kw;
        }
            //获取所有作品信息
            axios.get(url).then(function (response) {
                product_vm.p_arr=response.data;
            })
    },
    updated:function () {//当vue管理的变量发生改变时执行的方法
        //瀑布流初始化相关代码
        $(".grid").imagesLoaded().progress(function () {
            $(".grid").masonry({
                itemSelector:".grid-item", //告诉瀑布流框架如何找到元素
                columnWidth:210  //设置每一列总宽度(200+10间距)
            })
            //给图片添加鼠标移入移出事件
            $(".grid-item").hover(function () {//鼠标移入
                //$(this)得到移入的div
                //.children（）得到div里面的蓝条div
                //fadeIn（）淡入动画
                $(this).children("div").stop().fadeIn(500);
            },function () {
                $(this).children("div").stop().fadeOut(500);
            });
        });
    }
})